<template>
	<view class="container">
		<u-sticky>
			<view class="header" :style="{ paddingTop: menuButtonInfo.top + 'px', height: Object.keys(state.order?.agent).length ? '460rpx' : 'auto' }">
				<view class="back" @click="goBack" :style="{ top: menuButtonInfo.top + 5 + 'px' }">
					<uni-icons type="left" size="22" color="#fff"></uni-icons>
				</view>
				<view class="title" :style="{ height: menuButtonInfo.height + 'px', lineHeight: menuButtonInfo.height + 'px' }">订单详情</view>
				<view class="content">
					<view class="left">
						<view class="subtitle" v-if="state.order?.status == 1">待支付</view>
						<view class="subtitle" v-else-if="state.order?.status == 2">待发货</view>
						<view class="subtitle" v-else-if="state.order?.status == 3">待收货</view>
						<view class="subtitle" v-else-if="state.order?.status == 4">售后中</view>
						<view class="subtitle" v-else-if="state.order?.status == 5">已完成</view>
						<view class="subtitle" v-else-if="state.order?.status == 6">已拒绝</view>
						<view class="subcontent" v-if="state.order?.status == 4">售后订单，请及时处理！</view>
					</view>
					<view class="right">
						<image src="@/static/images/icon.png" class="icon"></image>
					</view>
				</view>
			</view>
			<view class="main" v-if="Object.keys(state.order?.agent)?.length">
				<view class="block-item">
					<view class="userInfo">{{ state.order?.agent?.nickname }} {{ state.order?.agent?.tel }}</view>
					<view class="address">{{ state.order?.agent?.address }}</view>
				</view>
			</view>
		</u-sticky>
		<view class="layout" :style="{ paddingTop: Object.keys(state.order?.agent).length ? '0' : '60rpx' }">
			<view class="list">
				<view class="list-box">
					<view class="info">
						<image :src="state.order?.goods?.goods_thumb" class="pic"></image>
						<view class="msg">
							<view class="title">{{ state.order?.goods?.goods_title }}</view>
							<view class="content">{{ state.order?.goods?.goods_sku_name }}</view>
							<view class="flexjus">
								<view class="time">{{ state.order?.created_at }}</view>
							</view>
						</view>
					</view>
					<view style="padding-top: 20rpx"></view>
				</view>
			</view>
			<view class="body">
				<view class="msg">
					<view class="label">订单编号</view>
					<view class="text">{{ state.order?.order_sn }}</view>
				</view>
				<view class="msg">
					<view class="label">会员姓名</view>
					<view class="text">{{ state.order?.nickname }}</view>
				</view>
				<view class="msg">
					<view class="label">手机号码</view>
					<view class="text">{{ state.order?.tel }}</view>
				</view>
				<view class="msg">
					<view class="label">售后原因</view>
					<view class="text">{{ state.order?.reason }}</view>
				</view>
				<view class="msg">
					<view class="label">所在地区</view>
					<view class="text">{{ state.order?.address?.province }} {{ state.order?.address?.city }} {{ state.order?.address?.area }}</view>
				</view>
				<view class="msg">
					<view class="label">详细地址</view>
					<view class="text">{{ state.order?.address?.detail_address }}</view>
				</view>
				<view class="msg">
					<view class="label">代理商编码</view>
					<view class="text">{{ state.order?.agent_number }}</view>
				</view>
				<view class="msg">
					<view class="label">领取时间</view>
					<view class="text">{{ state.order?.created_at }}</view>
				</view>
			</view>
		</view>
		<view class="footer" v-if="state.order.type == 2 && state.order.status == 4">
			<view class="btn-group-right">
				<view class="btn red" @click="xianxiahuanhuo">线下换货</view>
				<view class="btn red" @click="pingtaishouhou">平台售后</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { formPost } from '@/request/index.js';
import FormData from '@/request/formData.js';

const state = reactive({
	id: '',
	order: {
		agent: {}
	}
});

onLoad((option) => {
	state.id = option.id;
	getDetail();
});

const getDetail = async () => {
	let formDatas = new FormData();
	formDatas.append('order_id', state.id);
	const params = formDatas.getData();
	const res = await formPost('mm/getOrderInfo', params);
	const { code, data } = res;
	if (code == 200) {
		state.order = data;
	}
};

// 获取屏幕边界到安全区域距离
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
const list = reactive([{ id: 1, title: '我的专属礼品权益', content: '品牌手机一部', time: '2025-02-10 16:24:03', status: 1, status_text: '' }]);

//线下换货
const xianxiahuanhuo = () => {
	uni.navigateTo({
		url: `/pages/xianxiahuanhuo/xianxiahuanhuo?order_id=${state.id}`
	});
};
//平台售后
const pingtaishouhou = () => {
	uni.navigateTo({
		url: `/pages/pingtaishouhou/pingtaishouhou?order_id=${state.id}`
	});
};
//返回上一页面
const goBack = () => {
	uni.switchTab({
		url: '/pages/afterSalesOrder/afterSalesOrder'
	});
};
</script>

<style scoped lang="scss">
.header {
	height: auto;
	padding-bottom: 40rpx;
	.content {
		padding-top: 32rpx;
	}
}

.main {
	margin-top: -74rpx;
}
</style>
